<template>
	<view class="main">
		<uv-sticky ref="backTop" top="300">
			<view class="muif" style="background-color: #E6A23C;" v-if="!patientInfo||!patientInfo.id">
				<view class="muifi" style="width: 600rpx;text-align: center;">请选择就诊人</view>
			</view>
			<view class="muif" @click="openPatient" v-else>
				<view class="muifi">就诊人:</view>
				<view class="muifi">{{patientInfo.name}}</view>
				<view class="muifi">{{patientInfo.sex == 1 ? '男' :'女'}}</view>
				<view class="muifi">{{patientInfo.idCard}}</view>
				<view class="muifib">
					<uv-icon name="play-right-fill" color="#fff" size="18"></uv-icon>
				</view>
			</view>
		</uv-sticky>

		<view class="mv">
			<view class="mvi" v-for="(i,o) in records" :key="o" @click="openInfo(i)">
				<view class="mvil">
					<view class="mvilt">科别：{{i.keshi}} <text>( 床号 : {{i.chuanghao}} )</text></view>
					<view class="mvilct">住院号： <text>{{i.code}}</text></view>
				</view>
				<view class="mvir">{{i.date}}</view>
			</view>
		</view>

		<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirmpicker"></uv-picker>
		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="customStyle"
			:iconStyle="iconStyle"></uv-back-top>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				patientList: [],
				patientInfo: {},
				columns: [
					[]
				],
				customStyle: {
					backgroundColor: '#2c9b94',
				},
				iconStyle: {
					fontSize: '24rpx',
					color: '#fff',
				},
				cancleItem: {},
				records: []
			}
		},
		mounted() {
			this.getPatient()
		},
		methods: {
			openInfo(item) {
				uni.navigateTo({
					url: '/pages/ElectronicMedicalRecord/ElectronicMedicalRecordInfo?info=' + JSON.stringify(item)
				})
			},
			openPatient() {
				this.$refs.picker.open();
			},
			confirmpicker(e) {
				this.patientInfo = e.value[0]
			},
			change(index) {
				this.current = index;
				this.getPatient(index)
			},
			getPatient() {
				this.patientList = [{
						name: '张三三三',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 11,
						isBind: true
					},
					{
						name: '李四三',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 12
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 123
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 113
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 143
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 134
					},
				]
				this.patientList.map(i => {
					this.columns[0].push({
						label: `${i.name} ${i.sex == 1 ?'男' :''} ${i.idCard}`,
						...i
					})
				})
				this.patientInfo = this.patientList.find(i => i.isBind) || {}
				this.records = [{
						id: 11,
						code: 1522582,
						date: '2025-03-27 19:30',
						keshi: '胸外科',
						chuanghao: 6,
						type: 2,
					},
					{
						id: 21,
						code: 1522582,
						keshi: '肿瘤一',
						chuanghao: 17,
						date: '2025-03-17 09:00',
						type: 2,
					},
				]
			},

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
	}
</script>


<style scoped lang="scss">
	.main {
		min-height: 100vh;
		padding: 20rpx;
		background: linear-gradient(to bottom, #12acee22, #2c9b9422);
	}

	.mvi {
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.mvil {
			.mvilt {
				color: #000;
				font-size: 33rpx;
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;

				text {
					display: inline-block;
					margin-left: 20rpx;
					color: #999;
					font-size: 28rpx;
				}
			}
		}

		.mvir {
			color: #999;
			font-size: 28rpx;
		}
	}

	.muif {
		display: flex;
		align-items: center;
		background-color: #2c9b94;
		border-radius: 12rpx;
		margin-top: 20rpx;
		color: #fff;
		padding: 20rpx;

		.muifi {
			margin-right: 30rpx;
			font-size: 28rpx;

			&:nth-of-type(2) {
				font-weight: bold;
			}
		}
	}
</style>